import { Dialog } from '@mui/material';
import { DialogProps } from '@mui/material/Dialog/Dialog';
import { styled } from '@mui/material/styles';
import React from 'react';

const StyledDialog = styled(Dialog)(() => ({
    '& .MuiPaper-root': {
        color: '#ffffff',
        borderRadius: '12px',
        background: '#0A0916'
    },
    '& .MuiDialogTitle-root': {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '36px 56px 10px',
        fontSize: '20px',
        fontWeight: '600'
    }
}));

const GFSDialog: React.FC<DialogProps> = (props: DialogProps) => {
    const { children, ...rest } = props;
    return (
        <StyledDialog maxWidth="sm" fullWidth {...rest}>
            {children}
        </StyledDialog>
    );
};

export default GFSDialog;
